<template>
	<view class="article">
		<scroll-view class="top" v-if="tableList.length>0" scroll-x="true">
			<!-- tab -->
			<view class="tab">
				<view class="tab-nav" style='font-size:12px'>
					<view class="setTab" v-for="(item, index) in tableList" :key="item.id" :data-index="index"
					:class=" tableIndex == index ? 'active' : ''"  :data-id="item.id" @click="ontabtap">
						{{item.label}}</view>
				</view>
			</view>
		</scroll-view>
		<view style="height:80rpx"></view>
		<view class="main" v-if="contentList.length<1">
			<image src="/static/public/WSJ.png" class="wsjImg"></image>
			<view>暂无数据</view>
		</view>
		<view class="con" v-if="articleId == 1">
			<view v-for="(item,index) in contentList" :key="item.id" :data-id="item.id"  @click="goDetail(item)">
				<mediaItem :options="item"></mediaItem>
			</view>
		</view>
		<view class="con" v-if="articleId == 7">
			<view v-for="(item,index) in contentList" :key="item.id" :data-id="item.id"  @click="goAccDetail(item)">
				<accoundItem :options="item"></accoundItem>
			</view>
		</view>
		<view v-if="popShow">
			<popup :itemClassify="itemClassify"></popup>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import mediaItem from './new-item01.vue';
	import accoundItem from './new-item02.vue';
	import popup from"./popup.vue";
	export default {
		 data() {
		     return {
				articleId: 0,
				tableList:[],
				colunmId:0,
				tableIndex: 0,
				contentList: [],
				popShow: false ,
				itemClassify:"一"
			 }
		},
		components: {
		    mediaItem,
			accoundItem,
			popup
		},
		computed: {
			...mapState(["userInfo"]),
		},
		async onLoad(option){
			this.colunmId = option.id;
			this.articleId = option.id;
			let data = await this.getColumnList(option.id);
			this.getContentList(data[0].id);
		},
		methods: {
			//获取栏目
			async getColumnList(id){
				let data = await this.$api.getArtColumn(id);
				this.tableList  = data.data.data;
				return this.tableList;
			},
			//获取栏目下的内容
			getContentList(id){
				this.$api.getArtItem(id).then(res=> {
					this.contentList = res.data.data;
				})
			},
			//栏目点击
			ontabtap(e) {
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let columnId = e.target.dataset.id || e.currentTarget.dataset.id;
				this.tableIndex = index;
				this.getContentList(columnId);
			},
			//查看详细
			goDetail(obj) {
				uni.navigateTo({
					url: '/pages/template/article/detail/detail?obj=' + JSON.stringify(obj)
				});
			},
			//查看专项房源详细
			goAccDetail(obj) {
				let classify = this.userInfo.classify;
				let fwbClassify = obj.classify;
				this.itemClassify = fwbClassify;
				if(fwbClassify != 0 ) {
				    if(fwbClassify >= classify || fwbClassify == null) {
				        uni.navigateTo({
				        	url: '/pages/template/article/detail/detail?obj=' + JSON.stringify(obj)
				        });
				    }else {
						this.popShow = true
				    }
				}
			},
		}
	 }
</script>

<style scoped>
	.article{
		background: #f8f8f8;
		min-height: calc(100vh - var(--window-top)) ;
	}
	.top{
		width: 100%;
		white-space:nowrap; 
		position: fixed; 
		top: var(--window-top);
		z-index: 99;
	}
	.tab {
	  display: flex;
	  flex-direction: column;
	}
	.tab-nav {
	  height: 80rpx;
	  background: #fff;
	  display: flex;
	  line-height: 79rpx;
	  position: relative;
	  color: #999999;
	  font-size: 14px;
	}

	.setTab {
	  min-width: 20%;
	  max-width: 20%;
	  text-align: center;
	  height: 80rpx;
	  background-color: white;
	}
	.active{
		color:black;
		font-size: 15px;
		font-weight: bold;
		border-bottom:3px #52AAF8 solid
	}
	.con{
		overflow: hidden;
	}
	.main {
	  width: 100%;
	  font-size: 15px;
	  text-align: center;
	  padding-top: 100rpx;
	  color: #999999;
	  line-height: 50px;
	  
	}
	.wsjImg {
	  width: 180px;
	  height: 125px;
	  margin: 0 auto;
	}
	.text {
	  font-size: 15px;
	  color: #999999;
	  text-align: center;
	  margin-top: 40rpx;
	}
</style>
